<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线考试</title>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
    <header>
        <div class="c900 flex">
            <a href="./"><h1 style="color: #fdfdfd">在线考试</h1></a>
            <span class="flex">
                <a href="register.html">注册</a>
                <a href="login.html">登录</a>
            </span>
        </div>
    </header>
    <main class="c900">
        <h1 style="width: 70%;margin: 20px auto">注册账号</h1>
        <form class="grid2" style="grid-template-columns: auto 200px">
            <div class="grid2" style="grid-template-columns: 100px auto">
                <label for="">账号:</label><input v-model="user.name" type="text">
                <span class="err" v-html="msgs.name"></span>
                <label for="">密码:</label><input v-model="user.pwd" type="password">
                <span class="err" v-html="msgs.pwd"></span>
                <label for="">确认密码:</label><input v-model="user.repwd" type="password">
                <span class="err" v-html="msgs.repwd"></span>
                <label for="">电话:</label><input v-model="user.phone" type="number">
                <span class="err">{{msgs.phone}}</span>
                <label for="">邮箱:</label><input v-model="user.email" type="email">
                <span class="err">{{msgs.email}}</span>
                <label for="">头像:</label>
                    <el-input v-model="user.head">
                        <el-upload slot="append"
                                name="image"
                                action="upload"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <el-button icon="el-icon-upload2"></el-button>
                        </el-upload>
                    </el-input>
                <span class="err">{{msgs.head}}</span>
                <div style="grid-column: 2; text-align: center;">
                    <a href="login.html" style="margin-right: 20px">去登录</a>
                    <button @click.prevent="reg" style="padding: 5px 20px">注册</button>
                </div>
            </div>
            <img :src="user.head">
        </form>
    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            user:{name:"",pwd:"",phone:"",email:"",head:"https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",repwd:""},
            msgs:{name:"",pwd:"",phone:"",email:"",head:"",repwd:""},
        },
        created() {},
        methods : {
            reg(){
                // let p = new URLSearchParams(); axios.post("reg", p); // => User user
                //  axios.post("reg", this.user); // => @RequestBody User user
                axios.post("reg",this.user).then(res=>{
                    this.msgs={name:"",pwd:"",phone:"",email:"",head:"",repwd:""};
                    if(res.data.code == 1){
                        this.$message(res.data.msg);
                        return;
                    } else {
                        this.$alert(res.data.msg);
                    }
                    // console.info(res.data);
                    res.data.data.forEach(err=>{
                        if(this.msgs[ err.field ]){
                            this.msgs[ err.field ] += "<br>"
                        }
                        this.msgs[ err.field ] += err.defaultMessage;
                    });
                });
            },
            handleAvatarSuccess(res, file) {
                console.info(res); // res == result  axios res.data
                this.user.head = res.data;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type.indexOf('image')==0;
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能图片格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    })
</script>

<style>
    *{
        color:#222
    }
    .c900>form{
        width: 70%;
        margin: auto;
        padding: 30px;
        border: 1px green solid;
        border-radius: 10px;
        background-color: lightblue;
    }
    .c900>form>label,.c900>form>input{
        text-align: left;
        box-sizing: border-box;
        height: 35px;
        display: flex;
        align-items: center;
        outline: none;
        padding: 10px;
    }

    html,body,#app{
        height: 100%;
    }
    body{
        margin: 0px;
        padding: 0px;
        background-size: cover;
        background-image: url("https://img0.baidu.com/it/u=668574498,1720392676&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=295");
    }
    a{
        text-decoration: none;
        color: #666
    }
    img{
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
    .c900{
        width: 900px;
        margin-inline: auto;
    }
    .flex{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .grid2{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto auto auto auto;
    }
    #app>header{
        background-color: #0f9ae0;
        background-size: cover;
        position: sticky;
        top: 0px;
        z-index: 9999;
        height: 60px;
    }
    #app>header h1{
        margin: 10px;
    }
    #app>header span>a{
        margin-left: 20px;
        color: #fff;
    }
    #app>main{
        background-color: #eee8;
        min-height: calc(100% - 100px);
        padding: 20px;
    }
    .err{
        grid-column: 2/2;
        color: red
    }
</style>
</body>
</html>